<template>
  <div class="role">
    <wxform
      v-bind="searchFormConfig"
      v-model="formData"
      @queryBtnClick="queryBtnClick"
      @handleResetClick="handleResetClick"
      @updatemodelValue="updatemodelValue"
      ref="formContentRef"
    >
    </wxform>
    <page-content
      @SelectionChange="SelectionChange"
      @handleNewClick="handleNewClick"
      @handleEditClick="handleEditClick"
      :contenTableConfig="contenTableConfig"
      pageName="role"
      ref="pageContentRef"
    >
    </page-content>
    <page-modal :modalConfig="modalConfig" pageName="role" ref="pageModalRef">
      <div class="menu-tree">
        <el-tree
          ref="elTreeRef"
          :data="menus"
          :otherInfo="otherInfo"
          show-checkbox
          node-key="id"
          :props="{ children: 'children', label: 'name' }"
          @check="handleCheckChange"
        >
        </el-tree>
      </div>
    </page-modal>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, ref, nextTick } from 'vue'
import { useStore } from 'vuex'
import wxform from '../../../../base-ui/form/index'
import pageContent from '../../../../components/page-content/index'
import pageModal from '../../../../components/page-modal/index'
import { contenTableConfig } from './config/content.config'
import { searchFormConfig } from './config/searchconfig'
import { usePageSearch } from '../../../../hooks/usePageSearch'
import { modalConfig } from './config/modal.config'
import { usePageModal } from '../../../../hooks/usePageModal'
import { getMenuLeafKeys } from '../../../../ultills/map-mennus'
export default defineComponent({
  components: {
    wxform,
    pageContent,
    pageModal
  },
  name: 'role',
  setup() {
    const store = useStore()
    const menus = computed(() => store.state.entireMenu)
    const otherInfo = ref({})
    const formItems = searchFormConfig?.formItems ?? []
    const formOriginData = {}
    for (const item of formItems) {
      formOriginData[item.field] = ''
    }
    const formData = ref(formOriginData)

    const updatemodelValue = (newValue) => {
      formData.value = newValue
    }
    const SelectionChange = (newvalue) => {
      console.log(newvalue)
    }
    // 处理pageModal的hook
    const elTreeRef = ref()
    const editCallBack = (item: any) => {
      console.log(item)
      const leaftKeys = getMenuLeafKeys(item.menuList)
      nextTick(() => {
        elTreeRef.value?.setCheckedKeys(leaftKeys, false)
      })
    }
    const [pageModalRef, defualtInfo, handleNewClick, handleEditClick] =
      usePageModal(undefined, editCallBack)
    // 搜索和重置
    const [pageContentRef, queryBtnClick, formContentRef, handleResetClick] =
      usePageSearch()
    const handleCheckChange = (data1, data2) => {
      const checkedKeys = data2.checkedKeys
      const halfCheckedKeys = data2.halfCheckedKeys
      const menuList = [...checkedKeys, ...halfCheckedKeys]
      otherInfo.value = { menuList }
    }
    return {
      // ref
      pageContentRef,
      formContentRef,
      elTreeRef,
      // 配置信息
      formData,
      contenTableConfig,
      searchFormConfig,
      modalConfig,
      // 事件函数
      SelectionChange,
      updatemodelValue,
      handleResetClick,
      queryBtnClick,
      handleCheckChange,
      // ------
      pageModalRef,
      defualtInfo,
      handleNewClick,
      handleEditClick,
      // 数据
      menus,
      otherInfo
    }
  }
})
</script>

<style scoped labg="less">
.menu-tree {
  margin-left: 60px;
}
</style>
